<template>
  <div class="app-container">
    <div class="merchant">
      <div class="" style="display: flex; justify-content: space-between; align-items: flex-end">
        <div class="title">
          <span class="bar"></span>
          <span class="text">商户交易汇总</span>
        </div>
        <div>
          <el-button icon="Download" type="primary" @click="handleExport">导出</el-button>
        </div>
      </div>
      <el-divider />
      <el-form v-show="showSearch" ref="queryRef" :inline="true" :label-position="'right'" :model="queryParams" label-width="90px">
        <el-form-item label="日期:">
          <el-radio-group v-model="dayRadio">
            <el-radio-button label="1" @change="TodayData(0)">今天</el-radio-button>
            <el-radio-button label="2" @change="TodayData(-1)">昨天</el-radio-button>
            <el-radio-button label="3" @change="TodayData(-2)">近三天</el-radio-button>
            <el-radio-button label="4" @change="TodayData(-6)">近七天</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-date-picker v-model="dateRange" end-placeholder="结束日期" range-separator="-" start-placeholder="开始日期" type="daterange" value-format="YYYY-MM-DD" />
        </el-form-item>

        <br />
        <el-form-item label="商户名称" prop="merchantName">
          <el-input style="width: 230px" v-model="queryParams.merchantName" clearable placeholder="请输入商户名称" />
        </el-form-item>

        <el-form-item label="外部商户号" prop="organizationMerchantNo">
          <el-input style="width: 230px" v-model="queryParams.merchantNo" clearable placeholder="商户号" />
        </el-form-item>

        <el-form-item label="交易状态" prop="payStatus">
          <el-select style="width: 230px" v-model="queryParams.payStatus" clearable placeholder="请选择支付状态">
            <el-option v-for="dict in pay_status" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="交易类型" prop="payStatus">
          <el-select style="width: 230px" v-model="queryParams.tradeType" clearable placeholder="请选择交易类型">
            <el-option v-for="dict in laiqianle_trade_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button icon="Search" type="primary" @click="query">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="merchant_1">
        <div class="merchant_2" style="border-right: 1px dashed #ddd">
          <div class="merchant_3">交易总金额(元)</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(79, 201, 176)">
            {{ totalAll.payPriceDe }}
          </div>
        </div>
        <div class="merchant_2" style="border-right: 1px dashed #ddd">
          <div class="merchant_3">交易总笔数(笔)</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(123, 201, 249)">
            {{ totalAll.countPay }}
          </div>
        </div>
        <div class="merchant_2" style="border-right: 1px dashed #ddd">
          <div class="merchant_3">笔均金额(元)</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(123, 201, 249)">
            {{ totalAll.avgPayDe }}
          </div>
        </div>
        <div class="merchant_2">
          <div class="merchant_3">交易总手续费(元)</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(79, 201, 176)">
            {{ totalAll.ratePriceDe }}
          </div>
        </div>
      </div>

      <el-radio-group v-model="orderByValue" size="large">
        <el-radio-button label="1" @change="orderBy('pay_price')">按金额排序</el-radio-button>
        <el-radio-button label="2" @change="orderBy('countPay')">按笔数排序</el-radio-button>
        <el-radio-button label="3" @change="orderBy('rate_price')">按手续费排序</el-radio-button>
        <el-radio-button label="4" @change="orderBy('avgPay')">按手笔均排序</el-radio-button>
        <el-radio-button label="5" @change="orderBy('create_time')">按入网日期排序</el-radio-button>
      </el-radio-group>

      <el-divider />
      <el-table :data="tableList" border size="small" style="width: 100%; text-align: center">
        <el-table-column align="center">
          <template #header>
            <p>序号</p>
          </template>
          <template #default="scope">
            <p>{{ scope.$index + 1 }}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商户名称" prop="merchantName" />
        <el-table-column align="center" label="商户编码" prop="merchantNo">
          <template #default="scope">
            <p>
              <el-link style="color: #508cee" @click="onToUrl(scope.row.merchantNo)">
                {{ scope.row.merchantNo }}
              </el-link>
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="支付笔数" prop="countPay" />
        <el-table-column align="center" label="交易金额" prop="payPriceDe">
          <template #default="scope">
            <p>
              <span style="color: #ff6600"> ￥ {{ scope.row.payPriceDe }} </span>
            </p>
          </template>
        </el-table-column>

        <el-table-column align="center" label="交易均额" prop="avgPayDe">
          <template #default="scope">
            <p>
              <span style="color: #ff6600"> ￥ {{ scope.row.avgPayDe }} </span>
            </p>
          </template>
        </el-table-column>

        <el-table-column align="center" label="手续费" prop="ratePriceDe">
          <template #default="scope">
            <p>
              <span style="color: #ff6600"> ￥ {{ scope.row.ratePriceDe }} </span>
            </p>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum" :total="total" @pagination="getList" />
    </div>
  </div>
</template>

<script setup>
  import { getCurrentInstance, reactive, ref, toRefs } from 'vue';
  import { getMerTotal, getMerTotalList } from '@/api/deal/deal';
  import { getNowDateTime, TodayDataUtils } from '@/utils/dateUtils';
  import { isWithinOneMonth } from '@/utils/index';
  import { dayjs, ElMessageBox } from 'element-plus';
  const { proxy } = getCurrentInstance();
  const { pay_status, device_type, laiqianle_pay_type, laiqianle_trade_type, symbol_type } = proxy.useDict(
    'pay_status',
    'device_type',
    'laiqianle_pay_type',
    'laiqianle_trade_type',
    'symbol_type',
  );

  const orderByValue = ref(1);

  const today = reactive({
    oneDaya: null,
    twoDaya: null,
  });
  const dateRange = ref([]);
  const small = ref(false);
  const disabled = ref(false);
  const showSearch = ref(true);
  const dayRadio = ref(1);
  const total = ref(0);
  const tableList = ref([]);
  let totalAll = ref({
    avgPay: null,
    avgPayDe: null,
    countPay: null,
    payPrice: null,
    payPriceDe: null,
    ratePrice: null,
    ratePriceDe: null,
  });
  const data = reactive({
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      merchantName: null,
      merchantNo: null,
      orderField: null,
      payStatus: '2',
      tradeType: '1',
    },
  });
  const { queryParams } = toRefs(data);
  const platform = ref('');

  // 获取列表
  function getList() {
    console.log(dateRange.value);
    getMerTotalList(proxy.addDateRange(queryParams.value, dateRange.value)).then((res) => {
      tableList.value = res.rows;
      total.value = res.total;
    });
  }

  function getTotal() {
    getMerTotal(proxy.addDateRange(queryParams.value, dateRange.value)).then((res) => {
      totalAll.value = res.data;
    });
  }

  // 查询
  function query() {
    if (dateRange.value === null || !isWithinOneMonth(dateRange.value[0], dateRange.value[1])) {
      ElMessageBox.alert('查询周期不能超过一个月', '警告', {
        confirmButtonText: '确定',
        callback: () => {
          return;
        },
      });
      return;
    }
    queryParams.value.pageNum = 1;
    getList();
    getTotal();
  }

  function TodayData(day) {
    today.value = TodayDataUtils(day);
    if (day === 0) {
      dateRange.value = [today.value.oneDaya, today.value.twoDaya];
      dayRadio.value = 1;
    } else if (day === -1) {
      dateRange.value = [today.value.oneDaya, today.value.oneDaya];
      dayRadio.value = 2;
    } else if (day === -2) {
      dateRange.value = [today.value.oneDaya, today.value.twoDaya];
      dayRadio.value = 3;
    } else if (day === -6) {
      dayRadio.value = 4;
      dateRange.value = [today.value.oneDaya, today.value.twoDaya];
    }

    getList();
    getTotal();
  }

  function orderBy(orderby) {
    if (orderby === 'pay_price') {
      orderByValue.value = 1;
    } else if (orderby === 'countPay') {
      orderByValue.value = 2;
    } else if (orderby === 'rate_price') {
      orderByValue.value = 3;
    } else if (orderby === 'rate_price') {
      orderByValue.value = 4;
    } else if (orderby === 'create_time') {
      orderByValue.value = 5;
    }
    queryParams.value.orderField = orderby;
    dateRange.value = [today.value.oneDaya, today.value.twoDaya];
    getList();
    getTotal();
  }

  /** 导出按钮操作 */
  function handleExport() {
    let date = getNowDateTime();
    proxy.download(
      'deal/deal/exportTotal',
      {
        ...queryParams.value,
      },
      `商户交易汇总_${date + new Date().getTime()}.xlsx`,
    );
  }

  function onToUrl(on) {
    proxy.$router.push(`/jin/register?outMerchantNo=` + on);
  }

  /** 重置按钮操作 */
  function resetQuery() {
    dayRadio.value = '1';
    dateRange.value = [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
    reset();
    query();
  }

  function reset() {
    queryParams.value = {
      pageNum: 1,
      pageSize: 10,
      merchantName: null,
      merchantNo: null,
      orderField: null,
      payStatus: '2',
      tradeType: '1',
    };
    proxy.resetForm('queryRef');
  }

  TodayData(0);
</script>

<style lang="scss" scoped>
  .merchant {
    margin: 10px;

    .title {
      display: flex;
      align-items: center;
      padding-top: 16px;
      padding-left: 16px;

      .bar {
        width: 4px;
        height: 20px;
        background-color: #409eff;
        margin-right: 10px;
      }

      .text {
        font-size: 16px;
        color: #333;
      }
    }

    .merchant_1 {
      width: 100%;
      height: 110px;
      background: beige;
      border-bottom: 1px dashed #ddd;
      margin: 10px 0;
      border-top: 1px dashed #ddd;
      background: #fafafa;
      display: flex;

      .merchant_2 {
        flex: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
        margin: 10px 0;
      }

      .merchant_3 {
        display: block;
        height: 30px;
        margin-bottom: 5px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        color: #666;
      }
    }

    .demo-pagination-block {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-end;
    }
  }
</style>
